<template>
  <div>
    <div style="font-size: 20px;">地区招聘人数统计</div>
    <div ref="target" style="width: 100%;height: 100%;left: -60px; top: -10px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { ListRegion } from "@/api/screen/region.js";

const target = ref(null);
let mChart = null;
const dataList = ref(null)
onMounted(async () => {
  mChart = echarts.init(target.value)
  const response = await (await ListRegion()).data;
  // console.log(response)
  dataList.value = response.map((item) => ({
    name: item.regionName,
    value: item.regionSize
  }))
  // console.log(dataList.value)
  renderChart()
})
function getSeriesData() {
  const series = []

  dataList.value.forEach((item, index) => {
    // 上层环形绘制
    series.push({
      name: item.name,
      // 使用饼图绘制，减少饼图宽度即为环形图
      type: 'pie',
      // 逆时针排布
      clockWise: false,
      // 不展示鼠标移入动画
      hoverAnimation: false,
      // 半径位置，需要依次递减，否则会重复在一处进行展示
      radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
      // 中心点
      center: ['55%', '55%'],
      // 不展示 label
      label: { show: false },
      // 数据配置
      data: [
        // 设置数据与名称
        { value: item.value, name: item.name },
        // 最大数据，展示比例
        {
          value: 1000,
          name: '',
          itemStyle: { color: 'rgba(0,0,0,0)', borderWidth: 0 },
          tooltip: { show: false },
          hoverAnimation: false
        }
      ]
    })

    // // 底层图
    // series.push({
    //     name: item.name,
    //     type: 'pie',
    //     // 图形不响应事件
    //     silent: true,
    //     // z-index: 置于底层
    //     z: 1,
    //     // 逆时针排布
    //     clockWise: false,
    //     // 不展示鼠标移入动画
    //     hoverAnimation: false,
    //     // 半径位置，需要依次递减，否则会重复在一处进行展示
    //     radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
    //     // 中心点
    //     center: ['55%', '55%'],
    //     // 不展示 label
    //     label: { show: false },
    //     // 数据
    //     data: [
    //         // 绘制底线 75%
    //         {
    //             value: 7.5,
    //             itemStyle: { color: 'rgb(3, 31, 62)', borderWidth: 0 },
    //             tooltip: { show: false },
    //             hoverAnimation: false
    //         },
    //         // 绘制底线 25% 透明区域
    //         {
    //             value: 2.5,
    //             name: '',
    //             itemStyle: { color: 'rgba(0,0,0,0)', borderWidth: 0 },
    //             tooltip: { show: false },
    //             hoverAnimation: false
    //         }
    //     ]
    // })
  })

  return series
}
function renderChart() {
  const options = {
    // grid: {
    //   // left: '-30%',
    //   // top: '15%',
    //   // bottom: '5%',
    //   // width: '20%'
    // },
    // 图例配置
    legend: {
      show: true,
      // 图例色块
      icon: 'circle',
      // 位置
      // top: '14%',
      // left: '60%',
      right: '0%',
      top: 'center',
      // 展示数据
      data: dataList.value.map((item) => item.name),
      // 总宽度（一列）
      width: -5,
      // 每个色块的宽
      itemWidth: 10,
      // 每个色块的高度
      itemHeight: 10,
      // item 间距
      itemGap: 10,
      // 展示内容
      formatter: function (name) {
        return '{title|' + name + '}'
      },
      // 字体配置
      textStyle: {
        rich: {
          title: {
            fontSize: 15,
            // lineHeight: 5,
            color: 'rgba(255,255,255,0.8)'
          }
        }
      }
    },
    // 提示层
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{a}<br>{b}:{c}({d}%)'
    },
    // Y 轴展示选项
    yAxis: [
      {
        type: 'category',
        // 反向展示
        inverse: true,
        // 不展示轴线
        axisLine: {
          show: false
        },
        // 不展示刻度
        axisTick: {
          show: false
        }
      }
    ],
    // X 轴不展示
    xAxis: [
      {
        show: false
      }
    ],
    // 每两个标记一条线
    series: getSeriesData()
  }

  mChart.setOption(options)
}
</script>

<style lang="scss" scoped></style>
